<template>
  <div class="stock-management-container">
    <h1 class="title">库存管理</h1>
    <div class="card-container">
      <el-card class="stock-card">
        <h3 class="card-title">库存</h3>
        <el-table :data="stock" border style="width: 100%" class="stock-table">
          <el-table-column prop="name" label="货物名称" width="180"></el-table-column>
          <el-table-column prop="quantity" label="当前库存"></el-table-column>
        </el-table>
      </el-card>
    </div>

    <!-- 入库表单 -->
    <div class="card-container">
      <el-card class="stock-card">
        <h3 class="card-title">入库</h3>
        <el-form :model="newStockIn" label-width="80px" class="stock-form">
          <el-form-item label="货物名称">
            <el-input v-model="newStockIn.name" placeholder="请输入货物名称"></el-input>
          </el-form-item>
          <el-form-item label="数量">
            <el-input-number v-model="newStockIn.quantity" :min="1"></el-input-number>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleStockIn">提交</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 出库表单 -->
    <div class="card-container">
      <el-card class="stock-card">
        <h3 class="card-title">出库</h3>
        <el-form :model="newStockOut" label-width="80px" class="stock-form">
          <el-form-item label="货物名称">
            <el-input v-model="newStockOut.name" placeholder="请输入货物名称"></el-input>
          </el-form-item>
          <el-form-item label="数量">
            <el-input-number v-model="newStockOut.quantity" :min="1"></el-input-number>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleStockOut">提交</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 操作日志 -->
    <div class="card-container">
      <el-card class="stock-card">
        <h3 class="card-title">操作日志</h3>
        <el-table :data="logs" border style="width: 100%" class="logs-table">
          <el-table-column prop="timestamp" label="时间" width="180"></el-table-column>
          <el-table-column prop="action" label="操作"></el-table-column>
          <el-table-column prop="item_name" label="货物名称"></el-table-column>
          <el-table-column prop="quantity" label="数量"></el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getStockItems, addStockIn, addStockOut, getStockLogs } from '@/api/stock';
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const stock = ref([]);
    const newStockIn = ref({ name: '', quantity: null });
    const newStockOut = ref({ name: '', quantity: null });
    const logs = ref([]);

    const fetchStock = async () => {
      try {
        const response = await getStockItems();
        stock.value = response.data;
      } catch (error) {
        console.error('Error fetching stock:', error);
      }
    };

    const fetchLogs = async () => {
      try {
        const response = await getStockLogs();
        logs.value = response.data;
      } catch (error) {
        console.error('Error fetching logs:', error);
      }
    };

    const handleStockIn = async () => {
      try {
        await addStockIn(newStockIn.value);
        newStockIn.value = { name: '', quantity: null };
        await fetchStock();
        await fetchLogs();
      } catch (error) {
        console.error('Error adding stock in:', error);
      }
    };

    const handleStockOut = async () => {
      try {
        await addStockOut(newStockOut.value);
        newStockOut.value = { name: '', quantity: null };
        await fetchStock();
        await fetchLogs();
      } catch (error) {
        console.error('Error adding stock out:', error);
      }
    };

    onMounted(async () => {
      await fetchStock();
      await fetchLogs();
    });

    return {
      stock,
      newStockIn,
      newStockOut,
      logs,
      handleStockIn,
      handleStockOut,
    };
  },
};
</script>

<style scoped>
.stock-management-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.title {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
  border-bottom: 2px solid #409eff;
  padding-bottom: 10px;
}

.card-container {
  margin-bottom: 20px;
}

.stock-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.card-title {
  color: #333;
  margin-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 10px;
}

.stock-table,
.logs-table {
  margin-top: 20px;
}

.stock-form {
  margin-top: 20px;
}

.el-button--primary {
  background-color: #409eff;
  border-color: #409eff;
  margin-top: 20px;
  width: 100%;
}
</style>